/** 
 * 学习目标:props的特点
 * 
+ 可以给组件传递任意类型的数据，包括虚拟 DOM 结构
+ props是只读的，不允许修改props的数据  -  **单向数据流**
 * */
import React, { Component } from "react";

export default class App extends Component {
    render() {
        return <div>
            {/* 数字 数组 对象 函数 jsx */}
            {/* <Child title={2}></Child>
            <Child title={[1, 2, 3]}></Child> */}
            {/* <Child title={{ name: 'hhh' }}></Child> */}
            {/* <Child fn={() => alert('123')} title={<i>我是i标签</i>}></Child> */}
            {/* <Child title={<i>我是i标签</i>}></Child> */}
        </div>
    }
}

export class Child extends Component {
    render() {
        // 推荐结构props
        const { title, fn } = this.props
        return (
            <div>
                {/* <h1>希望接收到title：{title.name}</h1> */}
                <h1>希望接收到title：{title}</h1>
                {/* <button onClick={fn}>子组件</button> */}
            </div>
        )
    }
}

